@import "assets/styles/styles";

.Input {
  // Position + size
  height: 30px;
  display: inline-block;
  transition: 100ms all ease;
  padding: 0 0.4rem;

  // Style reset - bootstrap is adding unnecessary css
  outline: none !important;
  border: 2px solid $mid-gray;
  background-color: $light-gray;

  &:hover {
    background-color: $white;
  }

  &:focus,
  &:active {
    border-color: $black;
  }
}

.Select {
  @extend .Input;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,<svg width='14' height='14' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='m0,6l12,12l12,-12l-24,0z'/><path fill='none' d='m0,0l24,0l0,24l-24,0l0,-24z'/></svg>");
  background-repeat: no-repeat;
  background-position: calc(100% - 0.25rem) center;
  padding: 0 1.25em 0 0.4rem;
}
